Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
🛼
drink
milk
and
kick
🍑
.
Document
🛼
drink
milk
and
kick
🍑
.
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); body { margin: 0; height: 100dvh; perspective: 460px; perspective-origin: 50% 54%; overflow: hidden; background: radial-gradient( circle at -20% bottom, #111, transparent 40% ), radial-gradient( circle at 120% bottom, #111, transparent 40% ), radial-gradient( circle at top right, #429, transparent ), radial-gradient( circle at top left, #a35 30%, #000 ); } .floor { width: 100dvw; height: 2500dvh; position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(90deg) translateZ(-52px); background: repeating-linear-gradient( 35deg, transparent, hotpink, pink 80px, transparent 120px, transparent 200px ), repeating-linear-gradient( to bottom, violet, #104a, #2068 40px, rebeccapurple 80px, violet 160px ); background-size: 200% 200%; animation: floor 70s linear infinite; } @keyframes floor { to { transform: translate(-50%, -50%) rotateX(90deg) translateZ(-52px) translateY(13%); } } .drink-milk { position: absolute; top: 50%; left: 50%; translate: -50% 120%; width: 100%; padding: 10dvmin; font-size: 7dvmin; text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 300; letter-spacing: -.08em; word-spacing: .05em; } .drink-milk .skate, .drink-milk .word { position: absolute; translate: -50% -50%; color: #fff3; padding: 1em; background: radial-gradient( circle at left center, #ff0018, #edff6e 50% ); background-clip: text; background-size: 200% 200%; } .drink-milk .word { visibility: hidden; text-align: center; } .drink-milk:hover .skate { opacity: 0; } .drink-milk:hover .word { animation: word 1.5s linear infinite; } :nth-child(1 of .drink-milk .word) { animation-delay: 0; } :nth-child(2 of .drink-milk .word) { animation-delay: .25s } :nth-child(3 of .drink-milk .word) { animation-delay: .5s; } :nth-child(4 of .drink-milk .word) { animation-delay: .75s; } :nth-child(5 of .drink-milk .word) { animation-delay: 1s; } :nth-child(6 of .drink-milk .word) { animation-delay: 1.25s; } @keyframes word { from, 10%, 27%, to { visibility: hidden; } 20% { visibility: visible; } } .aircraft { position: absolute; width: 100%; top: -10dvh; opacity: 0; filter: saturate(4) contrast(10) blur(0) hue-rotate(60deg); transition: all 1s .5s; transform: translateZ(0); } .drink-milk:hover ~ .aircraft { opacity: 1; } .codepen-canvas { --size: 25dvmin; --final-opacity: 1; position: absolute; top: 50%; left: 50%; translate: -50% -70%; max-width: var(--size); max-height: var(--size); cursor: move; opacity: 0; background: radial-gradient( circle at center 55%, #000d 40%, #0000 40% ); border-radius: 50%; animation: fade-in 5s forwards; } .jigglypuff-canvas { --size: 15dvmin; position: absolute; top: 40%; left: -10%; translate: -100% -100%; max-width: var(--size); max-height: var(--size); cursor: move; opacity: 0; animation: jigglypuff 15s cubic-bezier(.25,.46,.45,.94) infinite, fade-in 5s forwards; } @keyframes jigglypuff { to { top: 15%; left: calc(100% + var(--size)); } } @keyframes fade-in { to { opacity: var(--final-opacity, 1); } } .parrot { position: absolute; top: 10%; left: 110%; animation: parrot 8s 6s infinite; } @keyframes parrot { 30%, to { left: -30%; } } .screen { --shine-opacity: 0; width: clamp(165px, 275px, 20dvw); aspect-ratio: 4/3.5; position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform-style: preserve-3d; overflow: hidden; transition: all .5s; background: url(https://assets.codepen.io/25387/noise.gif); } .screen::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: radial-gradient( ellipse 90% 140% at 50% 100%, transparent 60%, #000f, transparent ); rotate: .5turn; opacity: var(--shine-opacity); z-index: 1; } .screen::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 15%; background: radial-gradient( ellipse 85% 130% at 50% 100%, transparent 60%, #f6c6, transparent ); opacity: var(--shine-opacity); } iframe { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 100%; } svg { position: absolute; inset: 0; pointer-events: none; } :nth-child(1 of .screen) { --shine-opacity: .5; transform: translate(-102.5%, 2.5%) rotateY(45deg); } :nth-child(2 of .screen) { --shine-opacity: 1; transform: translate(102.5%, 2.5%) rotateY(-45deg); } .tv { position: absolute; top: 50%; left: 50%; width: clamp(240px, 400px, 30%); vertical-align: middle; filter: hue-rotate(100deg) saturate(3); transition: all .5s; pointer-events: none; } :nth-child(1 of .tv) { translate: -130% -50%; transform-origin: left center; } :nth-child(2 of .tv) { translate: 30% -50%; rotate: y 180deg; } .lightning { position: absolute; top: 0; right: 0; translate: 20% -15%; } .lightning img { width: 20dvmin; rotate: 60deg; opacity: .2; scale: .6; } .lightning img:hover { opacity: 1; }
console.log("Event Fired") const interval = 3000 const demos = [ 'gONYmNM', 'WNVvQOV', 'rLEooV', 'YzrMdBM', 'mdbGvmr', 'OJyGmWX', 'yLWgwmR', 'gxyoXW', 'ExmqYym', 'VqjvqR', 'NWEgJbG', 'NLRxvN', 'VwKQENg', 'jOWVOYL', 'yLKwgyo', 'aJExoe', 'QWXOYvz', 'JGEKJr' ] let index = 1 const screens = Array.from( document.querySelectorAll('iframe') ) const baseUrl = 'https://cdpn.io/pen/debug' const setDemo = (screen, demoSlug) => { screen.src = `${baseUrl}/${demoSlug}` return screen } const preloadDemo = (slug) => { const iframe = document.createElement('iframe') const screen = setDemo(iframe, slug) screen.style.cssText += 'display: none; position: absolute;' document.body.appendChild(screen) return new Promise(resolve => { screen.onload = resolve }) } const preloadDemos = () => { return Promise.all(demos.map(preloadDemo)) } const start = () => { setInterval(async () => { const demoIndex = index === demos.length ? (index = 0) : index++ const demo = demos[demoIndex] setDemo(screens[0], demo) }, interval) setTimeout(() => { setInterval(async () => { const demoIndex = index === 0 ? demos.length - 1 : demos.length - index const demo = demos[demoIndex] setDemo(screens[1], demo) }, interval) }, interval / 3) } // Jigglypuff code taken from: // https://codepen.io/Adamanska/pen/gNYdRZ const initJugglypuff = () => { let isSpinning = true; const TAU = Zdog.TAU; const pink = '#F6CED7'; const blue = '#006885'; const dark = '#383336'; const illo = new Zdog.Illustration({ element: '.jigglypuff-canvas', rotate: { y: -TAU/14,}, dragRotate: true, onDragStart: function() { isSpinning = false; }, }); var body = new Zdog.Shape({ addTo: illo, stroke: 380, color: pink, }); // ====== EYES ======= var eyes = new Zdog.Group({ addTo:illo, translate: { z: 160, x : -90 }, rotate: { y: TAU/10 }, }) let eye = new Zdog.Ellipse({ addTo: eyes, diameter: 120, stroke: 1, fill: true, color: '#fff', }); let pupil = new Zdog.Ellipse({ addTo: eyes, diameter: 80, stroke: 1, fill: true, color: blue, }); let shine = new Zdog.Ellipse({ addTo: eyes, diameter: 20, stroke: 1, translate: { x: 10, y: -20 }, fill: true, color: '#fff', }); eyes.copyGraph({ addTo:illo, translate: { z: 160, x : 90 }, rotate: { y: -TAU/10 }, }); // ====== EARS ====== var ears = new Zdog.Group({ addTo: illo, translate: { z: 0, x : -130, y :-150}, rotate: {z: 35} }) let leftEar = new Zdog.Shape({ addTo: ears, path: [ { x: 0, y: -80 }, { x: 60, y: 60 }, { x: -60, y: 60 }, ], fill: true, stroke: 20, color: pink, }); let leftInside = new Zdog.Shape({ addTo: ears, path: [ { x: 0, y: -30 }, { x: 30, y: 30 }, { x: -50, y: 30 }, ], fill: true, stroke: 10, color: dark, translate: { z: 8, }, }); var otherEars = new Zdog.Group({ addTo: illo, translate: { z: 0, x : 130, y :-150}, rotate: {z: -35} }) let rightEar = new Zdog.Shape({ addTo: otherEars, path: [ { x: 0, y: -80 }, { x: 60, y: 60 }, { x: -60, y: 60 }, ], fill: true, stroke: 20, color: pink, }); let rightInside = new Zdog.Shape({ addTo: otherEars, path: [ { x: 0, y: -30 }, { x: 30, y: 30 }, { x: -35, y: 30 }, ], fill: true, stroke: 1, color: dark, //translate: { z: 8, }, }); // ====== FEET ====== var feet = new Zdog.Group({ addTo: illo, translate: { z: 30, x : -100, y :170}, rotate: {y: -50} }) let leftFoot = new Zdog.Shape({ addTo: feet, path: [ // triangle { z: 0, x: 0 }, { z: 50, x: 40 }, { z: -40, x: 40 }, { z: -40, x: 0 }, ], fill: true, stroke: 70, color: pink, }); //feet.copyGraph({ //addTo: illo, //translate: { z: 30, x : 70, y :170}, //rotate: {y: TAU/12} //}) var feet2 = new Zdog.Group({ addTo: illo, translate: { z: 0, x : 80, y :170}, //rotate: {y: -50} }) let rFoot = new Zdog.Shape({ addTo: feet2, path: [ // triangle { z: 0, x: 0 }, { z: 40, x: 40 ,},// pointe { z: -20, x: 20 }, { z: -40, x: 0 }, ], fill: true, stroke: 70, color: pink, rotate: {y: TAU/22}, }); // ====== SMILE ====== let smile = new Zdog.Ellipse({ addTo: illo, diameter: 40, quarters: 2, stroke: 4, color: dark, rotate:{z: TAU/4}, translate: { z: 190, x : 0, y :30}, }); // ====== ARMS ====== var arms = new Zdog.Group({ addTo: illo, translate: { z: 0, x : -190, y :50}, rotate: {y: -50} }) let lArms = new Zdog.Shape({ addTo: arms, path: [ // triangle { z: 40, x: -0, y:30 }, { z: 50, x: 50 }, { z: -20, x: 20 }, ], fill: true, stroke: 50, color: pink, }); var arms2 = new Zdog.Group({ addTo: illo, translate: { z: 0, x : 190, y :50}, rotate: {y: 50} }) let rArms = new Zdog.Shape({ addTo: arms2, path: [ // triangle { z: 40, x: 0, y:30 }, { z: -50, x: -50 }, { z: 20, x: -20 }, ], fill: true, stroke: 50, color: pink, }); // ====== HAIR ====== var hair = new Zdog.Group({ addTo: illo, translate: { z: 60, x : 0, y :-150}, //rotate: {y: -50} }) var meche = new Zdog.Shape({ addTo: hair, stroke: 150, color: pink, }); var hairSmallMid = new Zdog.Shape({ addTo: hair, stroke: 120, color: pink, translate: { z: 30, x : 0, y :0}, }); var hairSmall = new Zdog.Shape({ addTo: hair, stroke: 120, color: pink, translate: { z: 50, x : 0, y :20}, }); function animate() { illo.rotate.y += 0.005; illo.rotate.z += 0.00125; illo.updateRenderGraph(); requestAnimationFrame( animate ); } animate(); } // codepen logo is taken from: // https://codepen.io/danhearn/pen/XwQrXJ const initCodepen = (element) => { const illo = new Zdog.Illustration({ element: '.codepen-canvas', dragRotate: true, onDragStart: function() { isSpinning = false }, onDragEnd: function() { isSpinning = true }, }); const color = '#fff' const thickness = 15 const size = 60 const spacing = size*1.1 let anchor = new Zdog.Anchor({ addTo: illo, scale: 1, rotate: { z: -Zdog.TAU/8, x: -Zdog.TAU/7 }, }); const bottomRect = new Zdog.Rect({ addTo: anchor, width: size*2, height: size*2, stroke: thickness, color: color }); bottomRect.copy({ translate: { z: spacing }, color: color }); const topLine = new Zdog.Shape({ addTo: bottomRect, translate: { x: size, y: size }, path: [ { z: 0 }, { z: spacing }, ], stroke: thickness, color: color, }); topLine.copy({ translate: { x: size, y: -size }, color: color }); topLine.copy({ translate: { x: -size, y: size }, color: color }); topLine.copy({ translate: { x: -size, y: -size }, color: color }); function animate() { illo.updateRenderGraph(); illo.rotate.y += 0.025; requestAnimationFrame( animate ); } animate(); } preloadDemos() start() initJugglypuff() initCodepen()